import React, { useState } from "react";
import { Cell, Switch, Button } from "react-vant";
import { useTranslation } from "react-i18next";
import { changeLanguage } from "i18next";
const App = () => {
  const { t } = useTranslation();

  const [lang, setLang] = useState("zh");

  return (
    <div>
      <Cell.Group>
        <Cell title={t("mode.name")} value={t("mode.current")} isLink />
        <Cell title={t("modeName1")} value={<Switch defaultChecked />} />
        <Cell title={t("modeName2")} value={<Switch defaultChecked />} />
        <Cell title={t("lang")} value={t("current")} isLink />
      </Cell.Group>

      <Button
        type="primary"
        onClick={() => {
          changeLanguage(lang === "zh" ? "en" : "zh");
          setLang(lang === "zh" ? "en" : "zh")
        }}
      >
        {lang === "zh" ? "切换英文" : "切换中文"}
      </Button>
    </div>
  );
};

export default App;
